<template>
  <!-- 绿色背景 + 黑色细边框 + 白色内边距 -->
  <view style="border: 1rpx solid #000; background-color: #7cfc00; padding: 25rpx; margin: 10rpx 0;">
    <!-- 标题：居中、加粗、稍大字体 -->
    <view style="font-size: 34rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;">
      子组件B
    </view>

    <!-- CompA传值展示：蓝色背景白色文字（与示例中蓝色块一致） -->
    <view style="font-size: 28rpx; margin: 20rpx 0; line-height: 1.5;">
      CompA组件传进来的值: 
      <text style="background-color: #1e90ff; color: white; padding: 2rpx 10rpx; margin-left: 5rpx;">
        {{ result || '空' }}
      </text>
    </view>

    <!-- 回传值区域：输入框+按钮横向排列 -->
    <view style="font-size: 28rpx; margin: 20rpx 0; display: flex; align-items: center; line-height: 1.5;">
      <text>回传值：</text>
      
      <!-- 灰色输入框（默认值与示例一致） -->
      <input 
        type="text" 
        v-model="callbackValue" 
        style="background-color: #d3d3d3; color: #1e90ff; border: 1rpx solid #999; padding: 5rpx 10rpx; margin-left: 10rpx; width: 220rpx; height: 50rpx; font-size: 26rpx;"
      />
      
      <!-- 回传按钮：白色背景黑色文字 -->
      <button 
        @click="sendCallbackToParent"
        style="background-color: white; color: black; margin-left: 15rpx; padding: 5rpx 15rpx; font-size: 26rpx; border: 1rpx solid #999; height: 54rpx; line-height: 54rpx;"
      >
        回传
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    result: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 回传值默认值与示例完全一致：0595-2788888
      callbackValue: '0595-2788888'
    }
  },
  methods: {
    sendCallbackToParent() {
      this.$emit('sendCallback', this.callbackValue)
    }
  }
}
</script>